<template>
	<view class="homepage">
		<view class="searchline">
			<view class="putbox">
				<view class="iconfont icon-xiugai">
					
				</view>
				<input type="text" v-model="searchname"  placeholder="商品名称/行业/商户"/>
			</view>
			<view class="searchbtn" @click="getlist">
				搜索
			</view>
		</view>
		
		<view class="tabline">
			<view class="itemtab"  :class="sel==1?'act':''" @click="selecttab(1)">
				全部
			</view>
			<view class="itemtab"  :class="sel==2?'act':''" @click="selecttab(2)">
				分类
			</view>
			<view class="itemtab"  style="display: flex;align-items: center;justify-content: center;" :class="sel==3?'act':''" @click="selecttab(3)">
				价格
				<view class="iconfont icon-xiangxia">
					
				</view>
			</view>
		
		
		</view>
	
		
		<view class="tabline" style="top: 172rpx;" v-if="sel==2"> 
		
			<view class="itemtab" v-for="item in tablist" :key="item.id" :class="tab==item.id?'act':''" @click="selectgood(item)">
				{{item.name}}
			</view>
		
		</view>
		<view class="goodlist">
			<view class="itemgood" v-for="item in goodlist" :key="item.id">
				<view class="imgbox">
					<image :src="'https://admin.caifubang.top/prod-api'+item.img" mode=""></image>
				</view>
				<view class="goodname">
					{{item.name}}
				</view>
				<view class="labelline">
				{{item.memberName}}  数量：{{item.num}}
				</view>
				<view class="btnline">
					<view class="left">
						<view class="price">
							{{item.price}}
						</view>
						<view class="danwei">
							积分
						</view>
					
					
					</view>
					<view class="btn" @click="paygood(item)">
						购买
					</view>
				</view>
			</view>
		</view>
		<view class="winpage" v-if="winshow||win2show">
			<view class="win1">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="labelbox">
					<view class="label1">
						扫码购买
					</view>
					<view class="title1">
						识别下方二维码购买
					</view>
				</view>
		
				<view class="imgbox">
					<image :src="'https://admin.caifubang.top/prod-api'+sanurl" mode="" @click="shibieerweima"></image>
				</view>
				<view class="pricetitle">
					 应付 <view class="price">￥{{pro.price}}</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录
					</view>
					<view class="imglist">
						
						
					<image v-if="imgurl" :src="'https://admin.caifubang.top/prod-api'+imgurl" mode=""></image>
					
						
						
						<view v-if="!imgurl" class="upbtn" @click="uppayimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="titlebox">
					<view class="titletle">
						说明
					</view>
					<view class="content">
						扫码付款成功后，保留并上传支付记录图片审核成功后即购买成功
					</view>
				</view>
				<view class="pagebtn" @click="putorder">
				  提交审核
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win2show">
			<view class="win1">
				<view class="iconfont icon-guanbi guanbi" @click="closewin2"></view>
				
				<view class="iconbox">
					<view class="iconfont icon-duigou-yuan">
						
					</view>
					<view class="win3title">
						提交成功
					</view>
					<view class="win3label">
						您已成功提交个人信息请耐心等待审核结果
					</view>
				</view>
				<view class="winbtn" @click="win2show=false">
				完成
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win3show">
			<view class="win1" style="height: 55vh;">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="labelbox">
					<view class="label1">
						区间搜索
					</view>
				
				</view>
				<view class="putline">
					<input type="number" v-model="minprice" placeholder="请输入" />
					至
					<input type="number" v-model="maxprice" placeholder="请输入" />
				</view>
				<view class="labelbox">
					<view class="label1">
						排序搜索
					</view>
				  
				</view>
				<view class="paixuline">
					<view class="paixubtn" :class="sort==2?'actsort':''"  @click="selectsort(2)">
						由高到低
					</view>
					<view class="paixubtn" :class="sort==1?'actsort':''"  @click="selectsort(1)">
						由低到高
					</view>
				</view>
				<view class="pagebtn" @click="pricesearch">
					确定
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	 import {availableProducts,industryTypes,TackProduct,getSysConfigByType,createOrder} from '../../utils/api.js'
	export default {
		data() {
			return {
				
				sel:1,
				pro:{},
				winshow:false,
				win2show:false,
				win3show:false,
				searchname:'',
				tab:0,
				minprice:'',
				maxprice:'',
				sort:'',
				size:'',
				num:1,
				goodlist:[
					
				],
				tablist:[],
				
				total:0,
				sanurl:'',
				imgurl:'',
				orderid:''
			}
		},

		 onLoad(e) {
			 // if(e.code){
			 				
			 // 				  let p={
			 // 				  	code:e.code
			 // 				  }
			 // 				  denglu(p).then(res=>{
			 // 				  	uni.setStorageSync('token',res.data.token)
								
							
			 // 				  })
			 //  } 
			 //else if(!uni.getStorageSync('token')){
	   // 					 uni.redirectTo({
	   // 					 	url: '/pages/login/login'
	   // 					 });
	   // }
		
			  
	   },

	   onShow() {
		   this.winshow=false,
		   this.win2show=false,
		   this.win3show=false
		   this.imgurl='',
		  
	   this.gethangye()
	   
	   },
		

		methods: {
			
			shibieerweima(){
				let list=[]
				let url='https://admin.caifubang.top/prod-api'+ this.sanurl
				list.push(url)
				console.log(list)
				uni.previewImage({
							urls:list,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			selectsort(e){
				this.sort=e
			},
		pricesearch(){
			let p={
				minPrice:this.minprice,
				maxPrice:this.maxprice,
				industryTypeId:'',
				merchantName:'',
				priceSort:this.sort,
				pageSize:20,
				pageNum:1
				
			}	
			availableProducts(p).then(res=>{
				this.win3show=false
				this.minprice='',
				this.maxprice=''
				this.sort=''
				this.goodlist=res.data.data.items,
				this.total=res.data.data.total
			})
		},
	
			selecttab(e){
				this.sel=e
				if(e==1){
					
					let p={
						minPrice:'',
						maxPrice:'',
						industryTypeId:'',
						merchantName:'',
						priceSort:'1',
						pageSize:20,
						pageNum:1
						
					}	
					availableProducts(p).then(res=>{
						this.goodlist=res.data.data.items,
						this.total=res.data.data.total
					})
				}
				if(e==3){
					this.win3show=true
				}
				
			},
			closewin2(){
				this.win2show=false
				
			},
			
			putorder(){
				let p={
					orderId:this.orderid,
					 paymentScreenshot:this.imgurl
				}
				createOrder(p).then(res=>{
					
					if(res.data.code==200){
						console.log(res,'提交订单成功')
						this.winshow=false,
						this.win2show=true
					}
				})
			},
			
			uppayimg(){
				// this.imgurl= "/profile/upload/2025/09/12/860678076395534_1_20250912112842A004.png"
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.imgurl= JSON.parse(uploadRes.data).data.fileName
												 console.log('上传成功', that.imgurl)
												  that.winshow = true   // 确保弹窗不被关闭
										        }
										      })}
				});
			},
			
			//获取行业
			gethangye(){
				industryTypes().then(res=>{
					console.log(res,'这是行业')
					this.tablist=res.data.data
					let p={
						minPrice:'',
						maxPrice:'',
						industryTypeId:'',
						merchantName:'',
						priceSort:'',
						pageSize:20,
						pageNum:1
						
					}	
					availableProducts(p).then(res=>{
						this.goodlist=res.data.data.items,
						this.total=res.data.data.total
					})
				})
			},
			//获取商品列表
			getlist(){
				
				let p={
					minPrice:this.minprice,
					maxPrice:this.maxprice,
					industryTypeId:this.tab==0?'':this.tab,
					merchantName:this.searchname,
					priceSort:this.sort,
					pageSize:this.size,
					pageNum:this.num
					
				}	
				availableProducts(p).then(res=>{
					this.goodlist=res.data.data.items,
					this.total=res.data.data.total
				})
			},
			
			guanbi(){
				this.winshow=false
				this.win1show=false
				
				this.win3show=false
				
			},
			
			//点击购买按钮
			paygood(e){
				this.pro=e
				let p={
					product_member_id:e.id
				}
				TackProduct(p).then(res=>{
					console.log(res,'这是点击')
					this.orderid=res.data.data.orderID
					 this.sanurl=res.data.data.shoukuanma
					if(res.data.code==200){
						this.winshow=true
						
					}
					
				})
				
			},
			selectgood(e){
				this.tab=e.id
				this.minPrice=''
				this.maxPrice=''
				this.merchantName=''
				let p={
					minPrice:'',
					maxPrice:'',
					industryTypeId:e.id,
					merchantName:'',
					priceSort:1,
					pageSize:20,
					pageNum:1
					
				}	
				availableProducts(p).then(res=>{
					this.goodlist=res.data.data.items,
					this.total=res.data.data.total
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.homepage{
		width: 750rpx;
		background-color: white;
		.searchline{
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 14rpx 40rpx;
			background-color: #FF5C00 ;
			justify-content: space-evenly;
		    position: fixed;
			top: 0;
			left: 0;
			 z-index: 1000;   // 保证在商品列表和图片上方
			.putbox{
				display: flex;
				align-items: center;
				background-color: white;
				width: 84%;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding: 4rpx 20rpx;
				.icoonfont{
					margin-right: 16rpx;
				}
			}
			.searchbtn{
				color: white;
				
			}
		}
		.tabline{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			height: 90rpx;
			overflow-x: auto;
			background-color: white;
			position: fixed;
			top: 88rpx;
			left: 0;
			 z-index: 1000;   // 保证在商品列表和图片上方
			.itemtab{
				width: 200rpx;
				min-width: 200rpx;
				text-align: center;
				border-bottom: 4rpx solid white;
			}
			.act{
				border-bottom: 4rpx solid #FF5C00 ;
				color: #FF5C00 ;
			}
		}
		.goodlist{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 190rpx;
			.itemgood{
				width: 48%;
				min-width: 48%;
                max-width: 48%;
				margin: 20rpx 1%;
				box-sizing: border-box;
				border: 1rpx solid whitesmoke;
				background-color: whitesmoke;
				.imgbox{
					width: 100%;
					height: 330rpx;
					image{
						width: 100%;
						height: 100%;
					}
					
				}
				.goodname{
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1.6;
					box-sizing: border-box;
					padding: 4rpx 16rpx;
					
				}
				.labelline{
					font-size: 28rpx;
					color: gray;
					line-height: 1.8;
					box-sizing: border-box;
					padding: 4rpx 16rpx;
				}
				.btnline{
					width: 100%;
					box-sizing: border-box;
					padding: 4rpx 20rpx;
					display: flex;
					align-items: center;
				    justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						color: #FF462A ;
						.price{
							font-size: 28rpx;
							font-weight: bold;
						}
						.danwei{
							font-size: 22rpx;
						}
					}
					.btn{
						width: 90rpx;
						height: 50rpx;
						border-radius: 25rpx;
						text-align: center;
						font-size: 28rpx;
						color: white;
						line-height: 50rpx;
						background-color:#FFC456  ;
					}
				}
			}
		}
		
	.winpage{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		.win1{
			width: 100%;
			height: 88vh;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: white;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			overflow-y: auto;
			.guanbi{
			  position: absolute;
			  right: 10rpx;
			  top: 10rpx;
			}
		
			.labelbox{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				margin-top: 50rpx;
				text-align: left;
				line-height: 2;
				.label1{
					font-weight: bold;
					text-align: left;
				}
				.title1{
					font-size: 30rpx;
					text-align: left;
					color: #ADADAD ;
				}
			}
			.putline{
				width: 90%;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				input{
					width: 45%;
					height: 80rpx;
					background-color: #c1c1c1;
					text-align: center;
					line-height: 80rpx;
					border-radius: 10rpx;
					font-style: 28rpx;
				}
			}
			.paixuline{
				width: 90%;
				margin: auto;
				display: flex;
				align-items: center;
		
				.paixubtn{
					width: 150rpx;
					height: 70rpx;
					background-color: #c1c1c1;
					text-align: center;
					line-height: 70rpx;
					border-radius: 10rpx;
					font-style: 28rpx;
					margin-right: 30rpx;
				}
				.actsort{
					color: white;
					background-color: #FF5C00;
				}
			}
			.pickerbox{
				width: 100%;
				.picker{
					width: 90%;
					height: 60rpx;
					line-height: 60rpx;
					margin: auto;
					background-color: #F4F4F4 ;
					padding: 0 20rpx;
				}
			}
			.imgbox{
				margin: 40rpx auto;
				width: 300rpx;
				height: 300rpx;
				border: 10rpx solid orange;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.pricetitle{
				display: flex;
				align-items: center;
				text-align: center;
				margin: auto;
				width: 100%;
				justify-content: center;
				.price{
					font-weight: bold;
					color: #FF2E00;
				}
			}
			.upbox{
				width: 90%;
				margin: auto;
				background-color: #F4F4F4;
				box-sizing: border-box;
				padding: 20rpx;
				.uptitle{
					font-weight: bold;
				}
				.imglist{
					width: 100%;
					display: flex;
					align-items: center;
					
					image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin: 10rpx;
					}
					.upbtn{
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						line-height: 150rpx;
						text-align: center;
						font-size: 88rpx;
						background-color: white;
	                    color: gray;
					}
				}
				.imglabel{
					color: gray;
					font-size: 28rpx;
				}
			}
			
			.titlebox{
				width: 90%;
				margin: auto;
				background-color: #F4F4F4;
				box-sizing: border-box;
				padding: 20rpx;
				.titletl{
					font-weight: bold;
				}
				.content{
					color: gray;
					font-size: 28rpx;
				}
			}
			.pagebtn{
				width: 90%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin:100rpx auto;
				border-radius: 40rpx;
				color: white;
				background-color: #FF5C00 ;
			}
			.iconbox{
				width: 36%;
				margin: 200rpx auto;
				.iconfont{
					font-size: 60rpx;
					font-weight: bold;
					color: #FF5C00 ;
					margin: auto;
					text-align: center;
				}
				.win3title{
					color: #FF5C00;
					margin: 30rpx;
					text-align: center;
				}
				.win3label{
					text-align: center;
					font-size: 28rpx;
					color: #ADADAD ;
					font-weight: bold;
				}
			}
			.winbtn{
				width: 450rpx;
				height: 70rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 70rpx;
				margin: auto;
				color: #FF5C00 ;
				border: 1rpx solid #FF5C00;
			}
		}
	
		
	}
	}
</style>
